<template>
  <div class="statistics">
    <div class="page-container">
      <div class="page-header">
        <h2>统计看板</h2>
        <div class="header-actions">
          <el-date-picker
            v-model="dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            @change="handleDateChange"
          />
          <el-button type="primary" @click="refreshData">
            <el-icon><Refresh /></el-icon>
            刷新数据
          </el-button>
        </div>
      </div>
      
      <!-- 统计卡片 -->
      <el-row :gutter="20" class="stats-cards">
        <el-col :span="6">
          <el-card class="stat-card">
            <div class="stat-content">
              <div class="stat-icon permit-icon">
                <el-icon><Document /></el-icon>
              </div>
              <div class="stat-info">
                <div class="stat-number">{{ stats.totalPermits }}</div>
                <div class="stat-label">许可证总数</div>
                <div class="stat-change positive">
                  <el-icon><TrendCharts /></el-icon>
                  +12.5%
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
        
        <el-col :span="6">
          <el-card class="stat-card">
            <div class="stat-content">
              <div class="stat-icon executing-icon">
                <el-icon><Operation /></el-icon>
              </div>
              <div class="stat-info">
                <div class="stat-number">{{ stats.executingPermits }}</div>
                <div class="stat-label">执行中</div>
                <div class="stat-change positive">
                  <el-icon><TrendCharts /></el-icon>
                  +8.3%
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
        
        <el-col :span="6">
          <el-card class="stat-card">
            <div class="stat-content">
              <div class="stat-icon completed-icon">
                <el-icon><Check /></el-icon>
              </div>
              <div class="stat-info">
                <div class="stat-number">{{ stats.completedPermits }}</div>
                <div class="stat-label">已完成</div>
                <div class="stat-change positive">
                  <el-icon><TrendCharts /></el-icon>
                  +15.2%
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
        
        <el-col :span="6">
          <el-card class="stat-card">
            <div class="stat-content">
              <div class="stat-icon overdue-icon">
                <el-icon><Warning /></el-icon>
              </div>
              <div class="stat-info">
                <div class="stat-number">{{ stats.overduePermits }}</div>
                <div class="stat-label">已超期</div>
                <div class="stat-change negative">
                  <el-icon><TrendCharts /></el-icon>
                  -5.1%
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
      
      <!-- 图表区域 -->
      <el-row :gutter="20" class="charts-row">
        <!-- 许可证申请趋势 -->
        <el-col :span="12">
          <el-card class="chart-card">
            <template #header>
              <div class="chart-header">
                <span>许可证申请趋势</span>
                <el-radio-group v-model="trendPeriod" size="small">
                  <el-radio-button value="7">近7天</el-radio-button>
                  <el-radio-button value="30">近30天</el-radio-button>
                  <el-radio-button value="90">近90天</el-radio-button>
                </el-radio-group>
              </div>
            </template>
            <div class="chart-container">
              <div class="chart-placeholder">
                <el-icon size="60" color="#409eff"><TrendCharts /></el-icon>
                <p>许可证申请趋势图</p>
                <div class="chart-data">
                  <div class="data-item">
                    <span class="label">今日申请：</span>
                    <span class="value">{{ trendData.today }}</span>
                  </div>
                  <div class="data-item">
                    <span class="label">昨日申请：</span>
                    <span class="value">{{ trendData.yesterday }}</span>
                  </div>
                  <div class="data-item">
                    <span class="label">本周申请：</span>
                    <span class="value">{{ trendData.thisWeek }}</span>
                  </div>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
        
        <!-- 作业类型分布 -->
        <el-col :span="12">
          <el-card class="chart-card">
            <template #header>
              <span>作业类型分布</span>
            </template>
            <div class="chart-container">
              <div class="chart-placeholder">
                <el-icon size="60" color="#67c23a"><PieChart /></el-icon>
                <p>作业类型分布饼图</p>
                <div class="work-type-stats">
                  <div 
                    v-for="item in workTypeStats" 
                    :key="item.type"
                    class="type-item"
                  >
                    <div class="type-color" :style="{ backgroundColor: item.color }"></div>
                    <span class="type-name">{{ item.name }}</span>
                    <span class="type-count">{{ item.count }}</span>
                    <span class="type-percentage">{{ item.percentage }}%</span>
                  </div>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
      
      <el-row :gutter="20" class="charts-row">
        <!-- 部门作业统计 -->
        <el-col :span="12">
          <el-card class="chart-card">
            <template #header>
              <span>部门作业统计</span>
            </template>
            <div class="chart-container">
              <div class="chart-placeholder">
                <el-icon size="60" color="#e6a23c"><DataBoard /></el-icon>
                <p>部门作业统计柱状图</p>
                <div class="department-stats">
                  <div 
                    v-for="item in departmentStats" 
                    :key="item.department"
                    class="dept-item"
                  >
                    <div class="dept-name">{{ item.department }}</div>
                    <div class="dept-bar">
                      <div 
                        class="dept-progress" 
                        :style="{ width: `${item.percentage}%`, backgroundColor: item.color }"
                      ></div>
                    </div>
                    <div class="dept-count">{{ item.count }}</div>
                  </div>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
        
        <!-- 许可证状态分布 -->
        <el-col :span="12">
          <el-card class="chart-card">
            <template #header>
              <span>许可证状态分布</span>
            </template>
            <div class="chart-container">
              <div class="chart-placeholder">
                <el-icon size="60" color="#f56c6c"><DataAnalysis /></el-icon>
                <p>许可证状态分布环形图</p>
                <div class="status-stats">
                  <div 
                    v-for="item in statusStats" 
                    :key="item.status"
                    class="status-item"
                  >
                    <div class="status-dot" :style="{ backgroundColor: item.color }"></div>
                    <span class="status-name">{{ item.name }}</span>
                    <span class="status-count">{{ item.count }}</span>
                  </div>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
      
      <!-- 详细数据表格 -->
      <el-card class="detail-table-card">
        <template #header>
          <div class="table-header">
            <span>详细数据</span>
            <el-button type="primary" size="small" @click="exportData">
              <el-icon><Download /></el-icon>
              导出数据
            </el-button>
          </div>
        </template>
        <el-table :data="detailData" stripe border>
          <el-table-column prop="date" label="日期" width="120" />
          <el-table-column prop="department" label="部门" width="120" />
          <el-table-column prop="workType" label="作业类型" width="120">
            <template #default="{ row }">
              <el-tag :type="getWorkTypeTagType(row.workType)">
                {{ getWorkTypeLabel(row.workType) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="totalCount" label="总数" width="80" align="center" />
          <el-table-column prop="completedCount" label="已完成" width="80" align="center" />
          <el-table-column prop="executingCount" label="执行中" width="80" align="center" />
          <el-table-column prop="overdueCount" label="已超期" width="80" align="center" />
          <el-table-column prop="completionRate" label="完成率" width="100" align="center">
            <template #default="{ row }">
              <el-progress 
                :percentage="row.completionRate" 
                :status="getProgressStatus(row.completionRate)"
                :stroke-width="6"
              />
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'

const dateRange = ref<[string, string]>(['2025-01-01', '2025-01-31'])
const trendPeriod = ref('30')

const stats = reactive({
  totalPermits: 0,
  executingPermits: 0,
  completedPermits: 0,
  overduePermits: 0
})

const trendData = reactive({
  today: 0,
  yesterday: 0,
  thisWeek: 0
})

const workTypeStats = ref([
  { type: 'high_altitude', name: '高空作业', count: 45, percentage: 35, color: '#e6a23c' },
  { type: 'hot_work', name: '动火作业', count: 32, percentage: 25, color: '#f56c6c' },
  { type: 'electrical', name: '电气作业', count: 28, percentage: 22, color: '#409eff' },
  { type: 'confined_space', name: '受限空间', count: 15, percentage: 12, color: '#909399' },
  { type: 'lifting', name: '起重作业', count: 8, percentage: 6, color: '#67c23a' }
])

const departmentStats = ref([
  { department: '维修部', count: 65, percentage: 85, color: '#409eff' },
  { department: '生产部', count: 45, percentage: 65, color: '#67c23a' },
  { department: '安全部', count: 20, percentage: 35, color: '#e6a23c' },
  { department: '技术部', count: 15, percentage: 25, color: '#f56c6c' }
])

const statusStats = ref([
  { status: 'completed', name: '已完成', count: 89, color: '#67c23a' },
  { status: 'executing', name: '执行中', count: 32, color: '#409eff' },
  { status: 'pending', name: '待审批', count: 15, color: '#e6a23c' },
  { status: 'overdue', name: '已超期', count: 8, color: '#f56c6c' }
])

const detailData = ref([
  {
    date: '2025-01-15',
    department: '维修部',
    workType: 'high_altitude',
    totalCount: 12,
    completedCount: 8,
    executingCount: 3,
    overdueCount: 1,
    completionRate: 67
  },
  {
    date: '2025-01-15',
    department: '生产部',
    workType: 'hot_work',
    totalCount: 8,
    completedCount: 6,
    executingCount: 2,
    overdueCount: 0,
    completionRate: 75
  },
  {
    date: '2025-01-14',
    department: '维修部',
    workType: 'electrical',
    totalCount: 15,
    completedCount: 12,
    executingCount: 2,
    overdueCount: 1,
    completionRate: 80
  }
])

// 获取统计数据
const fetchStatistics = async () => {
  try {
    // 模拟API调用
    await new Promise(resolve => setTimeout(resolve, 1000))
    
    // 更新统计数据
    stats.totalPermits = 128
    stats.executingPermits = 32
    stats.completedPermits = 89
    stats.overduePermits = 8
    
    // 更新趋势数据
    trendData.today = 12
    trendData.yesterday = 8
    trendData.thisWeek = 45
  } catch (error: any) {
    ElMessage.error(error.message || '获取统计数据失败')
  }
}

// 处理日期变化
const handleDateChange = () => {
  fetchStatistics()
}

// 刷新数据
const refreshData = () => {
  fetchStatistics()
  ElMessage.success('数据刷新成功')
}

// 导出数据
const exportData = () => {
  ElMessage.info('数据导出功能开发中...')
}

// 获取作业类型标签类型
const getWorkTypeTagType = (type: string) => {
  const typeMap: Record<string, string> = {
    high_altitude: 'warning',
    hot_work: 'danger',
    electrical: 'primary',
    confined_space: 'info',
    lifting: 'success'
  }
  return typeMap[type] || 'info'
}

// 获取作业类型标签
const getWorkTypeLabel = (type: string) => {
  const labelMap: Record<string, string> = {
    high_altitude: '高空作业',
    hot_work: '动火作业',
    electrical: '电气作业',
    confined_space: '受限空间',
    lifting: '起重作业'
  }
  return labelMap[type] || type
}

// 获取进度状态
const getProgressStatus = (rate: number) => {
  if (rate >= 90) return 'success'
  if (rate >= 70) return 'warning'
  return 'exception'
}

onMounted(() => {
  fetchStatistics()
})
</script>

<style lang="scss" scoped>
.statistics {
  .page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    
    h2 {
      margin: 0;
      color: #333;
    }
    
    .header-actions {
      display: flex;
      gap: 12px;
      align-items: center;
    }
  }
  
  .stats-cards {
    margin-bottom: 20px;
    
    .stat-card {
      .stat-content {
        display: flex;
        align-items: center;
        gap: 16px;
        
        .stat-icon {
          width: 60px;
          height: 60px;
          border-radius: 8px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 24px;
          color: white;
          
          &.permit-icon {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
          }
          
          &.executing-icon {
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
          }
          
          &.completed-icon {
            background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
          }
          
          &.overdue-icon {
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
          }
        }
        
        .stat-info {
          flex: 1;
          
          .stat-number {
            font-size: 28px;
            font-weight: bold;
            color: #333;
            line-height: 1;
          }
          
          .stat-label {
            font-size: 14px;
            color: #666;
            margin: 4px 0;
          }
          
          .stat-change {
            font-size: 12px;
            display: flex;
            align-items: center;
            gap: 4px;
            
            &.positive {
              color: #67c23a;
            }
            
            &.negative {
              color: #f56c6c;
            }
          }
        }
      }
    }
  }
  
  .charts-row {
    margin-bottom: 20px;
    
    .chart-card {
      .chart-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      
      .chart-container {
        height: 300px;
        
        .chart-placeholder {
          height: 100%;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          color: #999;
          
          p {
            margin: 16px 0;
            font-size: 16px;
          }
          
          .chart-data {
            margin-top: 20px;
            
            .data-item {
              display: flex;
              justify-content: space-between;
              margin-bottom: 8px;
              width: 200px;
              
              .label {
                color: #666;
              }
              
              .value {
                font-weight: bold;
                color: #333;
              }
            }
          }
          
          .work-type-stats {
            margin-top: 20px;
            width: 100%;
            
            .type-item {
              display: flex;
              align-items: center;
              margin-bottom: 12px;
              
              .type-color {
                width: 12px;
                height: 12px;
                border-radius: 50%;
                margin-right: 8px;
              }
              
              .type-name {
                flex: 1;
                color: #666;
              }
              
              .type-count {
                margin-right: 8px;
                font-weight: bold;
                color: #333;
              }
              
              .type-percentage {
                color: #999;
                font-size: 12px;
              }
            }
          }
          
          .department-stats {
            margin-top: 20px;
            width: 100%;
            
            .dept-item {
              display: flex;
              align-items: center;
              margin-bottom: 12px;
              
              .dept-name {
                width: 60px;
                color: #666;
                font-size: 12px;
              }
              
              .dept-bar {
                flex: 1;
                height: 8px;
                background: #f0f0f0;
                border-radius: 4px;
                margin: 0 12px;
                overflow: hidden;
                
                .dept-progress {
                  height: 100%;
                  border-radius: 4px;
                  transition: width 0.3s;
                }
              }
              
              .dept-count {
                width: 30px;
                text-align: right;
                font-weight: bold;
                color: #333;
              }
            }
          }
          
          .status-stats {
            margin-top: 20px;
            width: 100%;
            
            .status-item {
              display: flex;
              align-items: center;
              margin-bottom: 12px;
              
              .status-dot {
                width: 12px;
                height: 12px;
                border-radius: 50%;
                margin-right: 8px;
              }
              
              .status-name {
                flex: 1;
                color: #666;
              }
              
              .status-count {
                font-weight: bold;
                color: #333;
              }
            }
          }
        }
      }
    }
  }
  
  .detail-table-card {
    .table-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
}
</style>

